import 'package:flutter/material.dart';
import '../../utils/base.dart';

class ScanCasher extends StatelessWidget {
  const ScanCasher({Key key}) : super(key: key);

  Widget closeBtn(BuildContext context) {
    return Positioned(
      left: 0,
      top: Design.px(27),
      child: Container(
        width: Design.px(178),
        height: Design.px(98),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.horizontal(right: Radius.circular(49)),
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: [HexColor('ff7480'), HexColor('ff6a75')],
          ),
          boxShadow: [
            new BoxShadow(
                color: HexColor("ff7480"),
                offset: new Offset(Design.px(2), Design.px(3)),
                blurRadius: Design.px(3),
                spreadRadius: Design.px(0))
          ],
        ),
        child: FlatButton(
          onPressed: () => {
            Navigator.pop(context)//关闭对话框
          },
          padding: EdgeInsets.all(0),
          child: Text(
            "退出",
            style:
                TextStyle(color: HexColor("FFFFFF"), fontSize: Design.px(34)),
          ),
        ),
      ),
    );
  }

  Widget titleLabel(String title) {
    return Center(
      child: Container(
        padding: EdgeInsets.symmetric(vertical: Design.px(57)),
        child: Text(
          title,
          style: TextStyle(
            color: HexColor("333333"),
            fontSize: Design.px(42),
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }

  Widget keyItem(item) {
    if (item['type'] == 'dot') {
      double _size = Design.px(12);
      return new Container(
        width: _size,
        height: _size,
        decoration: new BoxDecoration(
          color: HexColor("333333"),
          shape: BoxShape.circle,
        ),
      );
    } else if (item['type'] == 'del') {
      return Container(
        child: Image.asset(
          item['data'],
          height: Design.px(40),
        ),
      );
    } else {
      return Text(
        item['data'].toString(),
        style: TextStyle(
          fontSize: Design.px(50),
          color: HexColor("333333"),
        ),
      );
    }
  }

  Widget numberKeyboard() {
    BorderRadius _borderRadius = BorderRadius.circular(Design.px(17));
    return Align(
      alignment: Alignment.topLeft,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: _borderRadius,
          color: HexColor("ffffff"),
          boxShadow: [
            BoxShadow(
                color: HexColor("f1f1f1"),
                offset: Offset(Design.px(10), Design.px(10)),
                blurRadius: Design.px(10),
                spreadRadius: Design.px(2))
          ],
          border:  Border.all(color: HexColor("eaeaea"), width: 0.5),
        ),
        child: ClipRRect(
          borderRadius: _borderRadius,
          child: GridView.count(
            physics: const NeverScrollableScrollPhysics(),
            //ListView嵌套GridView会报错，加此参数后可修正错误： https://segmentfault.com/q/1010000018145105/
            shrinkWrap: true,
            //每行3个
            crossAxisCount: 3,
            //水平子Widget之间间距
            crossAxisSpacing: Design.px(0),
            //垂直子Widget之间间距
            mainAxisSpacing: Design.px(0),
            // 中间间隔空白比例  https://blog.csdn.net/hao_m582/article/details/84108041
            childAspectRatio: 250 / 138,
            padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
            children: [
              {'type': 'num', 'data': 1, 'onPress': () => {}},
              {'type': 'num', 'data': 2, 'onPress': () => {}},
              {'type': 'num', 'data': 3, 'onPress': () => {}},
              {'type': 'num', 'data': 4, 'onPress': () => {}},
              {'type': 'num', 'data': 5, 'onPress': () => {}},
              {'type': 'num', 'data': 6, 'onPress': () => {}},
              {'type': 'num', 'data': 7, 'onPress': () => {}},
              {'type': 'num', 'data': 8, 'onPress': () => {}},
              {'type': 'num', 'data': 9, 'onPress': () => {}},
              {'type': 'dot', 'data': '.', 'onPress': () => {}},
              {'type': 'num', 'data': 0, 'onPress': () => {}},
              {
                'type': 'del',
                'data': 'assets/icon-pad-del.png',
                'onPress': () => {}
              },
            ]
                .map((item) => Container(
                      decoration: BoxDecoration(
                          border: Border.all(
                              color: HexColor("eaeaea"), width: 0.5)),
                      child: FlatButton(
                        onPressed: item['onPress'],
                        child: keyItem(item),
                      ),
                    ))
                .toList(),
          ),
        ),
      ),
    );
  }

  Widget orderForm() {
    TextStyle _defaultTextStyle = TextStyle(
      fontSize: Design.px(30),
      color: HexColor("666666"),
    );

    double _defaultLineHeight = Design.px(76);

    Widget _input(String label, String unit) {
      return Container(
        height: _defaultLineHeight,
        child: Row(
          children: <Widget>[
            Text(
              '${label}：',
              style: _defaultTextStyle,
            ),
            Container(
              child: Text(
                '',
                style: _defaultTextStyle,
              ),
            ),
            Text(
              unit,
              style: _defaultTextStyle,
            ),
          ],
        ),
      );
    }

    Widget _static(String label, String value, String unit) {
      return Container(
        height: _defaultLineHeight,
        child: Row(
          children: <Widget>[
            Text(
              '${label}：',
              style: _defaultTextStyle,
            ),
            Container(
              child: Text(
                value,
                style: _defaultTextStyle,
              ),
            ),
            Text(
              unit,
              style: _defaultTextStyle,
            ),
          ],
        ),
      );
    }

    Widget _staticWithIcons(String label, List<String> values) {
      return Container(
        height: _defaultLineHeight,
        child: Row(
          children: <Widget>[
            Text(
              '$label：',
              style: _defaultTextStyle,
            ),
            Container(
              child: Row(
                children: values
                    .map((v) => Container(
                          padding:
                              EdgeInsets.symmetric(horizontal: Design.px(8)),
                          child: Image.asset(
                            v,
                            width: Design.px(30),
                          ),
                        ))
                    .toList(),
              ),
            )
          ],
        ),
      );
    }

    Widget _tips(String text) {
      return Container(
        height: _defaultLineHeight,
        alignment: Alignment.centerLeft,
        child: Text(
          '* $text',
          textAlign: TextAlign.left,
          style: TextStyle(fontSize: Design.px(25), color: HexColor("ff3333")),
        ),
      );
    }

    Widget _button(String text) {
      BorderRadius _roundRadius = BorderRadius.circular(Design.px(40));

      return Align(
        alignment: Alignment.centerLeft,
        child: Container(
          margin: EdgeInsets.symmetric(vertical: Design.px(30)),
          width: Design.px(423),
          height: Design.px(80),
          decoration: BoxDecoration(
            borderRadius: _roundRadius,
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: [HexColor('ff91a2'), HexColor('ff6a75')],
            ),
          ),
          child: FlatButton(
            onPressed: () => {},
            child: Text(
              text,
              style: TextStyle(
                color: HexColor("FFFFFF"),
                fontSize: Design.px(34),
              ),
            ),
          ),
        ),
      );
    }

    return Column(
      children: <Widget>[
        _input('应收金额', '元'),
        _input('优惠金额', '元'),
        _static('实收金额', '1000', '元'),
        _staticWithIcons('支付渠道', [
          'assets/icon-wechatpay.png',
          'assets/icon-alipay.png',
        ]),
        _tips('支付渠道需在好酷掌柜完成进件'),
        _button('扫码收款'),
      ],
    );
  }

  Widget mainContent() {
    var left = Container(
      child: orderForm(),
    );

    var right = Container(
      decoration: BoxDecoration(boxShadow: [
        // new BoxShadow(
        //     color: HexColor("f1f1f1"),
        //     offset: new Offset(0.0, 0.0),
        //     blurRadius: 10.0,
        //     spreadRadius: 2.0)
      ]),
      child: numberKeyboard(),
    );
    return Container(
      padding: EdgeInsets.symmetric(horizontal: Design.px(40)),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Expanded(child: left),
          Expanded(child: right),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Dialog(
      
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(Design.px(10))),
      child: Container(
        height: Design.px(745),
        width: Design.px(1464),
        child: Stack(
          children: <Widget>[
            closeBtn(context),
            Column(
              children: <Widget>[
                titleLabel('扫码收款'),
                Expanded(
                  child: mainContent(),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}
